<template>
    <div>
        <el-tabs value="first">
            <el-tab-pane label="基本信息" name="first">
                <el-form ref="form" :model="user" label-width="80px">
                    <el-form-item label="上级ID" prop="pid" :rules="[
                                      { required: true, message: '上级Id', trigger: 'blur' }
                                      ]">
                        <el-input v-model="user.pid"></el-input>
                    </el-form-item>
                    <el-form-item label="用户名"  prop="username" :rules="[
                                      { required: true, message: '不能为空', trigger: 'blur' }
                                      ]">
                        <el-input v-model="user.username"></el-input>
                    </el-form-item>
                    <el-form-item label="真实姓名"  prop="realname" :rules="[
                                      { required: true, message: '不能为空', trigger: 'blur' }
                                      ]">
                        <el-input v-model="user.realname"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="mobile" :rules="[
                                      { required: true, message: '手机号', trigger: 'blur' }
                                      ]">
                        <el-input v-model="user.mobile"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="saveForm('form')">确定</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    export default {
        data: function(){
            return {
                user:{role_id:"2"}
            }
        },
        methods: {
            getData(){
                this.$axios.get(this.HOST+'/user/getUser',
                    {
                        params:{"id":this.user.id}
                    }
                ).then((res) => {
                    this.user=res.data.data;
                })
            },
            init:function () {
                if(this.$route.query.id!=null) {
                    this.user.id = this.$route.query.id;
                    this.getData();
                }else{
                    this.user.pid = this.$route.query.pid;
                }
            },
            saveForm(formName){
                this.parameterValue =JSON.stringify( this.parameterValue)
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios({
                            method:"post",
                            url: this.HOST+"/user/save",
                            data: this.user
                        }).then((res)=>{
                            if(res.data.code==0) {
                                this.id=res.data.data.id;
                                this.$message.success('保存成功');
                            }else{
                                this.$message.error(res.data.msg);
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        },
        computed:{
        },
        created:function(){
            this.init();
        }
    }
</script>

<style>
    .attribute_group{
        height: 30px;
    }
    .attribute_group .attribute_title{
        text-align: right;
    }
    .el-tag{
        margin-right: 5px;
    }
    .specificationsImg  .el-upload,.specificationsImg  .el-upload .avatar-uploader-icon{
        width: 80px;
        height:80px;
        line-height:80px;
    }
    .specifications_title{
        height: 30px;
    }
</style>
